<!--
 * @Author: wanlixin
 * @Date: 2019-09-27 19:54:41
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-11-11 16:25:41
 * @Description: 
 -->
<template>
  <div id="app">
    <header class="grimm-bar">
      <h1>grimm-ui</h1>
    </header>
    <section class="grimm-content" ref="mfct">
      <grimm-index-list :data="components" class="grimm-list">
        <grimm-index-list-group v-for="(group, index) in components" :key="index" :group="group">
          <grimm-index-list-item
            v-for="(component, index) in group.items"
            :key="index"
            :item="component"
          >
            <div class="grimm-item border-bottom-1px">
              <router-link class="link" :to="component.path">
                {{component.text}}
                <i class="iconfont arrow-right"></i>
              </router-link>
            </div>
          </grimm-index-list-item>
        </grimm-index-list-group>
        <span class="custom-nav-item" slot="nav-item" slot-scope="props">{{props.item}}</span>
      </grimm-index-list>
    </section>
    <!-- <section class="grimm-content" ref="mfct">
      <div :data="components" class="grimm-list">
        <div v-for="(group, index) in components" :key="index" :group="group">
          <div v-for="(component, index) in group.items" :key="index" :item="component">
            <div class="grimm-item border-bottom-1px">
              <router-link class="link" :to="component.path">
                {{component.text}}
                <i class="grimmic-arrow"></i>
              </router-link>
            </div>
          </div>
        </div>
        <span class="custom-nav-item" slot="nav-item" slot-scope="props">{{props.item}}</span>
      </div>
    </section>-->
    <grimm-view></grimm-view>
  </div>
</template>

<script type="text/ecmascript-6">
import GrimmView from './components/GrimmView.vue';

export default {
  data() {
    return {
      components: [
        {
          name: '布局',
          shortcut: 'Layout',
          items: [
            {
              path: '/basicLayout',
              text: 'Basic Layout',
            },
            {
              path: '/emptyStatus',
              text: '空状态',
            },
            {
              path: '/card',
              text: 'Card',
            },
            {
              path: '/list',
              text: 'List',
            },
          ],
        },
        {
          name: 'Basic 基础组件',
          shortcut: 'Basic',
          items: [
            {
              path: '/icon',
              text: 'Icon',
            },
            {
              path: '/button',
              text: 'Button',
            },
            {
              path: '/tag',
              text: 'Tag',
            },
            {
              path: '/loading',
              text: 'Loading',
            },
            {
              path: '/toast',
              text: 'Toast',
            },
            {
              path: '/dialog',
              text: 'Dialog',
            },
            {
              path: '/badge',
              text: 'Badge',
            },
          ],
        },
        {
          name: 'Form 表单组件',
          shortcut: 'Form',
          items: [
            {
              path: '/checkbox',
              text: 'Checkbox',
            },
            {
              path: '/checkboxGroup',
              text: 'CheckboxGroup',
            },
            {
              path: '/radio',
              text: 'Radio',
            },
            {
              path: '/radioGroup',
              text: 'RadioGroup',
            },
            {
              path: '/input',
              text: 'Input',
            },
            {
              path: '/select',
              text: 'Select',
            },
            {
              path: '/switch',
              text: 'Switch',
            },
            {
              path: '/validator',
              text: 'Validator',
            },
          ],
        },
        {
          name: '功能栏',
          shortcut: 'Function',
          items: [
            {
              path: '/noticebar',
              text: 'Noticebar',
            },
            {
              path: '/navBar',
              text: 'NavBar',
            },
            {
              path: '/searchbar',
              text: 'Searchbar',
            },
            {
              path: '/tabbar',
              text: 'Tabbar',
            },
            {
              path: '/toolbar',
              text: 'Toolbar',
            },
            {
              path: '/menu',
              text: 'Menu',
            },
            {
              path: '/timeline',
              text: 'Timeline',
            },
          ],
        },
        {
          name: '通用组件',
          shortcut: 'Popup',
          items: [
            {
              path: '/popup',
              text: 'Popup',
            },
            {
              path: '/picker',
              text: 'Picker',
            },
            {
              path: '/datepicker',
              text: 'DatePicker',
            },
            {
              path: '/cascadepicker',
              text: 'CascadePicker',
            },
          ],
        },
        {
          name: '数据展示',
          shortcut: 'Data',
          items: [
            // {
            //   path: '/',
            //   text: 'Chart（待开发）',
            // },
            {
              path: '/table',
              text: 'Table',
            },
          ],
        },
        {
          name: '文件',
          shortcut: 'File',
          items: [
            {
              path: '/imagePicker',
              text: 'ImagePicker',
            },
            {
              path: '/imagePreview',
              text: 'ImagePreview',
            },
          ],
        },
        {
          name: 'Scroll 滚动组件',
          shortcut: 'Scroll',
          items: [],
        },
      ],
    };
  },
  components: {
    GrimmView,
  },
};
</script>

<style lang="stylus"  scoped>
body, #app {
  height: 100%;
}

body {
  background-color: #fff;
  overflow: hidden;
}

.grimm-bar {
  z-index: 10;
  position: absolute;
  right: 0;
  left: 0;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #edf0f4;
  box-shadow: 0 2px 1px #e9eaea;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  h1 {
    font-size: 18px;
    font-weight: 500;
  }
}

.grimm-content {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;

  .grimm-list {
    padding-left: 10px;
    z-index: 1;

    .div {
      .div-anchor {
        font-size: 16px;
      }
    }

    ul {
      .grimm-item {
        // height: 40px;
        // line-height: 40px;
        // padding-left: 16px;
        .link {
          flex: 1;
          position: relative;
          color: #333;
          text-decoration: none;
          outline: 0;

          .grimmic-arrow {
            position: absolute;
            right: 0;
            padding: 0 5px;
            color: #ccc;
          }
        }
      }
    }

    .div-nav {
      margin-right: 0px;
      padding: 8px 5px;
      border-radius: 3px 0 0 3px;
      background: #f7f7f7;
      box-shadow: 0 0 5px #80808047;

      > ul {
        > li {
          padding: 8px 0;
        }
      }
    }

    .div-fixed {
      font-size: 16px;
    }
  }
}

.arrow-right {
  position: absolute;
  top: 0;
  right: 10px;
}
</style>
